<template>
<div class="app-container">
  <el-row>
<!--    部门搜索模块-->
    <el-card>
      <el-form
        :inline="true"
         size="small"
        :model="deptParams">
        <el-form-item label="部门名称">
          <el-input v-model="deptParams.deptName" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="deptParams.status" placeholder="部门状态">
            <el-option v-for="item in statusOptions"
                       :key="item.dictValue"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" size="small" @click="deptParams = {}">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
<!--    搜索栏结束-->

    <el-card>
<!--      顶部工具栏-->
      <el-form>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addDept">新增</el-button>
          <el-button type="info" icon="el-icon-sort" size="small" @click="toggleExpandAll">折叠/展开</el-button>
        </el-form-item>
      </el-form>
<!--      表格栏开始-->
      <el-table
        v-loading="loading"
        :data="deptList"
        v-if="refreshTable"
        row-key="deptId"
        border
        :default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="deptName" label="部门名称" align="center"/>
        <el-table-column prop="orderNum" label="排序" align="center"/>
        <el-table-column prop="leader" align="center" label="负责人"/>
        <el-table-column prop="phone" align="center" label="负责电话"/>
        <el-table-column prop="email" align="center" label="邮箱"/>
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="{row}">
            <dict-tag :data-list="statusOptions" :value="row.status"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown class="handle-button">
                    <span class="el-dropdown-link">
                      <el-link icon="el-icon-s-operation" type="primary">操作<i class="el-icon-arrow-down el-icon--right"/>
                      </el-link>
                    </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item >

                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    @click="toAdd(row)"
                  >新增</el-button>
                </el-dropdown-item>

                <el-dropdown-item>
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="toUpdateDictType(row)"
                  >修改</el-button>
                </el-dropdown-item>

                <el-dropdown-item>
                  <el-button
                    type="text"
                    @click="toDeleteDictType(row)"
                    icon="el-icon-delete"
                  >删除</el-button>
                </el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
<!--    表格组件结束-->

<!--    添加模块开始-->
    <el-dialog title="添加部门" center width="60%"
               :visible.sync="addDialog"
               v-if="addDialog"
               :title="title"
               @before-close="closeDialog">
      <sys-dept-add @after="getAllDept" :active-obj="activeObj" @close="closeDialog"/>
    </el-dialog>
    <!--    添加模块结束-->


<!--    修改模块开始-->
    <el-dialog
      v-if="updateDialog"
      :title="title"
      center
      width="60%"
      :visible.sync="updateDialog"
      @before-close="closeDialog"
    >
      <sys-dept-update :active-obj="activeObj" @after="getAllDept" @close="closeDialog" />
    </el-dialog>
<!--    修改模块结束-->

  </el-row>
</div>
</template>

<script>
import sysDictDataApi from "@/api/system/sysDictData";
import sysDictDept from "@/api/system/sysDictDept";
import {handleTree} from "@/utils/boge";
//引入自定义组件
import SysDeptAdd from './sys-dept-add'
import SysDeptUpdate from './sys-dept-update'


export default {
  name: "sys-dict-dept-list",
  components:{
    SysDeptAdd,
    SysDeptUpdate
  },

  data(){
    return{
      updateDialog:false,
      addDialog: false,

      deptParams:{
        deptName:undefined,
        status:undefined,
      },
      //表格数据集合
      deptList:[],
      //声明属性去存在放字典数据
      statusOptions:[],
      //部门加载条
      loading:false,
      //是否重新渲染表格
      refreshTable:true,
      //展开状态
      isExpandAll: true,
      //当前选中的数据
      activeObj:null,
      //标题
      title:""
    }
  },
  created() {

    this.getDictDataByDictType()
    this.getAllDept()
  },
  methods:{
    //根据字典类型加载数据状态的字典数据
    getDictDataByDictType(){
      sysDictDataApi.getDictDataByDictType("sys_status_type").then(res=>{
        this.statusOptions=res.data;
      })
    },
    search() {
      this.getAllDept()
    },
    //查询条件
    getAllDept(){
      this.loading=true
      this.getDictDataByDictType()
      sysDictDept.listDept(this.deptParams).then(res=>{
        let data=res.data
        this.deptList=handleTree(data,"deptId")
      })
      this.loading=false
    },
    //部门修改
    toUpdateDictType(row){
      this.activeObj = row
      this.title = `修改【${row.deptName}】部门`
      // 打开弹出层
      this.updateDialog = true
    },
    //部门删除
    toDeleteDictType(row){
      this.$confirm('此操作会删除该部门，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        sysDictDept.deleteById(row.deptId).then(res => {
          this.$message.success(res.msg)
          this.getAllDept();
        })
      }).catch(() => {
      })
    },
    //部门新增
    addDept(row){
      if (row != null && row.deptId) {
        this.activeObj = row;
      } else {
        this.activeObj = null;
      }
      this.addDialog=true;
    },
    //新增子部门
    toAdd(row){
      this.activeObj = undefined
      this.title = '添加部门'
      if (row.deptId != undefined) {
        this.title = `在【${row.deptName}】下面添加部门`
        this.activeObj = row
      }
      // 打开弹出层
      this.addDialog = true
    },
    //展开折叠调用方法
    toggleExpandAll(){
      this.refreshTable=false;
      this.isExpandAll=!this.isExpandAll;
      this.$nextTick(()=>{
        this.refreshTable=true
      })
    },
    closeDialog(){
      this.addDialog=false
      this.updateDialog=false
    }

  }
}
</script>

<style scoped>

</style>
